<template>
  <div id="menu">
    <el-form :inline="true" size="mini" class="custom-form" label-width="68px">
      <el-form-item label="菜单名称">
        <el-input v-model="pmQueryParams.name" placeholder="输入中文名"></el-input>
      </el-form-item>

      <!--<el-form-item label="上级菜单">-->
        <!--<perm v-model="pmQueryParams.pid"></perm>-->
      <!--</el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEdit()" v-if="hasPerm('resources-add')"><i
        class="fa fa-plus-circle"></i>&nbsp;新增菜单
      </el-button>
      <!--<el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, true)"-->
                 <!--v-if="hasPerm('resources-enable')"><i class="fa fa-unlock"></i>&nbsp;启用菜单-->
      <!--</el-button>-->
      <!--<el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, false)"-->
                 <!--v-if="hasPerm('resources-enable')"><i class="fa fa-lock"></i>&nbsp;禁用菜单-->
      <!--</el-button>-->
      <!--<el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length==0" @click="deletePerms()"-->
                 <!--v-if="hasPerm('resources-del')"><i class="fa fa-trash"></i>&nbsp;删除菜单-->
      <!--</el-button>-->
    </el-row>
    <dragTreeTable :data="treeData" :onDrag="onTreeDataChange"></dragTreeTable>

    <!--新增/修改菜单-->
    <add-edit-perm v-if="showPermForm" :show.sync="showPermForm" :permData="editData"></add-edit-perm>
  </div>

</template>

<script>
  import dragTreeTable from 'drag-tree-table'
  import Perm from '../../common/PermissionSelect'
  import AddEditPerm from './AddEditPermDialog'

  export default {
    name: 'menu',
    data() {
      return {
        loading: false,
        showPermForm: false,
        editData: null,
        editRules: {
          type: [
            {required: true, message: '未选择菜单类型', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '菜单名称不能为空', trigger: 'blur'}
          ],
          permission: [
            {required: true, message: '菜单代码不能为空', trigger: 'blur'}
          ]
        },
        pmQueryParams: {
          name: '',
          type: '',
          code: '',
          pid: '',
          state: '',
          pageNumber: 1,
          pageSize: 10
        },
        pmTypes: [
          {name: '全部', type: ''},
          {name: '菜单', type: 'menu'},
          {name: '功能', type: 'button'}
        ],
        treeData: {
          columns: [],
          lists: []
        },
        selectedRows: []
      }
    },
    components: {
      dragTreeTable,
      Perm,
      AddEditPerm
    },
    methods: {
      onTreeDataChange(list) {
        console.log(list)
        this.treeData.lists = list
      },
      openAddEdit(data) {
        if (data)
          this.editData = data;
        else
          this.editData = null;
        this.showPermForm = true;
      },
      query: function (currPage) {
        if (!currPage)
          this.pmQueryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/system/resources/menuList', this.pmQueryParams)
          .then((data) => {
            // this.tableData = data.data.records;
            // this.tableDataTotal = data.data.total;
            var columns = [
              {
                type: 'selection',
                title: '菜单名称',
                field: 'name',
                width: 200,
                align: 'center',
                formatter: (item) => {
                  return '<span>' + item.name + '</span>'
                }
              },
              {
                title: '菜单代码',
                field: 'code',
                width: 200,
                align: 'center',
                flex: 1
              },
              {
                title: '菜单类型',
                field: 'type',
                width: 200,
                align: 'center',
                flex: 1,
                formatter: (item) => {
                  let str;
                  if (item.type == 'menu') {
                    str = "菜单";
                  } else {
                    str = "功能";
                  }
                  return str;
                }
              },
              {
                title: '资源路径',
                field: 'url',
                width: 200,
                align: 'center',
                flex: 1
              },
              {
                title: '状态',
                field: 'state',
                width: 200,
                align: 'center',
                flex: 1,
                formatter: (item) => {
                  let str;
                  if (item.state == 1) {
                    str = "<span class=\"success\">启用</span>";
                  } else {
                    str = "<span class=\"danger\">禁用</span>";
                  }
                  return str;
                }
              },
              {
                title: '排序',
                field: 'sort',
                width: 200,
                align: 'center',
                flex: 1
              },
              {
                title: '操作',
                type: 'action',
                width: 350,
                align: 'center',
                actions: [
                  {
                    text: '修改',
                    onclick: this.openAddEdit,
                    formatter: (item) => {
                      return '<i class="fas fa-edit"></i>&nbsp;&nbsp;'
                    }
                  },
                  {
                    text: '启用/禁用',
                    onclick: this.enablePerms,
                    formatter: (item) => {
                      let str;
                      if (item.state == 1) {
                        str = "<i class=\"fas fa-ban text-danger\"></i>&nbsp;&nbsp;";
                      } else {
                        str = "<i class=\"fas fa-check-circle text-success\"></i>&nbsp;&nbsp;";
                      }
                      return str
                    }
                  },
                  {
                    text: '删除',
                    onclick: this.deletePerms,
                    formatter: (item) => {
                      return '<i class="fas fa-trash-alt text-danger"></i>'
                    }
                  }
                ]
              },
            ]
            this.treeData = {
              columns: columns,
              lists: data.data
            }
            this.loading = false;
          });
      },
      enablePerms: function (item) {
        let _ids = [];
        let _url = '/bucket-system/system/resources/disable';
        // if (!id && this.selectedRows.length > 0) {
        //   this.selectedRows.forEach(function (_s, index, arr) {
        //     _ids.push(_s.id);
        //   });
        // } else
        _ids.push(item.id);
        if (item.state == '0'){
          _url = '/bucket-system/system/resources/enable';
        }
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if (data.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            } else {
              this.$message.error(data.data);
            }
          });
      },
      deletePerms: function(id){
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            // if(!id && this.selectedRows.length>0){
            //   this.selectedRows.forEach(function(_s, index, arr){
            //     _ids.push(_s.id);
            //   });
            // }else
              _ids.push(id);
            this.api.post('/bucket-system/system/resources/delete', {id: _ids.join(',')})
              .then((data) => {
                if(data.code===200){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                }else{
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
    },
    mounted() {
      this.query();
    }
  }
</script>

<style lang="scss">
  .success {
    background-color: rgba(103, 194, 58, 0.1);
    border-color: rgba(103, 194, 58, 0.2);
    color: #67c23a;
    display: inline-block;
    padding: 0 10px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .danger {
    background-color: rgba(245, 108, 108, 0.1);
    border-color: rgba(245, 108, 108, 0.2);
    color: #f56c6c;
    display: inline-block;
    padding: 0 10px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .info {
    background-color: rgba(64, 158, 255, 0.1);
    display: inline-block;
    padding: 0 10px;
    height: 32px;
    line-height: 30px;
    font-size: 12px;
    color: #409EFF;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, 0.2);
    white-space: nowrap;
  }
</style>
